<template>
  <!--div形式的全部查询条件 border: 1px solid rgb(207, 225, 243); min-height: 33px; width: 340px;-->
  <el-drawer
    title="查询条件"
    :with-header="false"
    :before-close="moreClose"
    v-model="dialogInfo.isShow"
    direction="ttb"
    custom-class="demo-drawer"
    ref="drawer"
    size="400px"
  >
    <el-scrollbar style="height:350px;text-align: left;">
      <div style="float: left;margin: 5px; border: 1px solid rgb(207, 225, 243); min-height: 33px; width: 340px;"
        v-for="(ctrId, index) in allFind"
        :key="'form_' + index + '_'+ ctrId"
      >
        <label
          style="width:60px;font-size:9pt;text-align: right;float: left;margin-left: 5px;margin-top: 5px;"
        >
          {{itemMeta[ctrId].label}}
        </label>
        <div :style="'width:' + 500 + 'px;'">
          <find-item-ctrl
            :model="findModel[ctrId]"
            :itemMeta="itemMeta[ctrId]"
          >
          </find-item-ctrl>
        </div>
      </div>
    </el-scrollbar>
  </el-drawer>
</template>

<script>
  import { ref, onMounted, defineComponent } from 'vue'
  import { ElScrollbar, ElDrawer } from 'element-plus'
  // 查询的子控件的容器
  import findItemCtrl from './item/_shell.vue'
  // 查询子控件
  import { findItem, findItemDict} from './item/_map-find-item'

export default defineComponent({
  name: 'el-find-more-div',
  inheritAttrs: false,
  components: {
    ElScrollbar, ElDrawer,
    findItemCtrl,
    ...findItem
  },
  props: {
    allFind: Array,
    itemMeta: Object,
    findModel: Object,
    dialogInfo: Object // 是否打开抽屉
  },
  setup (props, context) {
    // console.log('查询控件 more == props', props)

    // 获取 $ref
    const formControl = ref(null)
    onMounted(() => {
      // console.log('表单dom', formControl)
    })

    const resetForm = () => {
      // 清空表单
      formControl.value.resetFields()
    }

    // 收起抽屉判断快捷是否为空
    const dialogInfo = props.dialogInfo
    const moreClose = () => {
      dialogInfo.isShow = false
    }

    return {
      findItemDict, // 查询子控件的字典

      resetForm, // 重置表单
      formControl, // 获取表单的dom
      moreClose // 收起抽屉，设置默认
    }
  }
})
</script>
